<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady" style="background-color: #F5F5F5; padding: 0 8px;">
		<moxi-nav :set="navSet"></moxi-nav>
		<view style="display: flex; flex-direction: column; overflow: hidden;" :style="{
			'--app-color': app_color,
			'--app-radius': '8px',
			'--app-color-rgb': colorList[12],
		}">
			<view class="list">
				<view class="item" v-for="(item, index) in tabs" v-if="index < 4" :key="index"
					@click="getStatus(item.id)">
					<view class="circle"
						:style="{ 'background-color': item.id == info.status ? colorList[0] : '#999' }">
						<u-icon size="24px" color="#fff" :name="item.icon"></u-icon>
					</view>
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
			<view class="scrollY" v-if="list && list.length > 0">
				<u-list @scrolltolower="scrolltolower" height="100%">
					<view class="classify">
						<view class="title" v-for="i in tabs" v-if="i.id == info.status && i.id != -1">{{ i.name }}
						</view>
						<view class="item" v-for="item in list" @click="taskDetail(item.id)">
							<!-- 任务信息 -->
							<view class="person-info">
								<view class="avatar">
									<image style="width: 48px; height: 48px;" :src="item.issuer.pic" mode="widthFix" />
								</view>
								<view class="info">
									<view class="name">
										<view>{{ item.name }}</view>
										<view class="more" v-for="j in tabs" v-if="item.status == j.id">
											<view class="tag"
												:style="{ 'color': j.color, 'background-color': `${j.color}16` }">
												{{ j.name }}
											</view>
										</view>
									</view>
									<view class="office">
										<view style="margin-right: 8px;">{{ item.issuer.showname }}</view>
									</view>
								</view>
							</view>
							<!-- 展示时间 -->
							<view class="showTime" style="padding-bottom: 8px;border-bottom: 0.5px solid #00000016;">
								<view class="time u-line-1">任务时间:&ensp;{{ formatDate(item.start_time) }}&ensp;至&ensp;{{
									item.end_time == 0 ? '不限' : formatDate(item.end_time) }}
								</view>
								<view class="shenyu u-line-1" v-if="item.status != 100">剩余时间:&ensp;{{
									shengyuTime(item.start_time, item.end_time == 0 ? -1 : item.end_time, item.status)
								}}
								</view>
								<view class="shenyu u-line-1" v-if="item.status == 100">完结日期:&ensp;{{
									formatDate(item.over_time)
								}}
								</view>
							</view>
							<view class="showMore">
								<view class="show-item" v-for="j in priority" v-if="item.level == j.id">
									<u-icon name="error-circle-fill" :color="j.color" size="24"></u-icon>
									<view class="text">
										<view>任务类型:</view>
										<view :style="{ 'color': j.color }">{{ j.name }}</view>
									</view>
								</view>
								<view class="show-item">
									<u-icon name="man-add" :color="app_color" size="24"></u-icon>
									<view class="text">
										<view>参与人数:</view>
										<view :style="{ 'color': app_color }">{{ !item.userInfo ? 0 :
											item.userInfo.length
										}}人</view>
									</view>
								</view>
								<view class="show-item">
									<u-icon name="order" :color="app_color" size="24"></u-icon>
									<view class="text">
										<view>任务详情</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 加载数据 -->
					<u-loadmore :status="hasMore" loadingIcon="spinner" dashed color="#999" />
				</u-list>
			</view>
			<!-- 没有数据 -->
			<view v-else
				style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex: 1; justify-content: center; align-items: center;">
				<u-empty mode="data" width="300" height="300" text="没有任务数据">
				</u-empty>
			</view>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabs: [{
				name: '全部',
				id: -1,
				icon: 'grid-fill'
			},
			{
				name: '进行中',
				id: 1,
				icon: 'hourglass',
				color: '#365CD2',
			},
			{
				name: '等待开始',
				id: 0,
				icon: 'file-text-fill',
				color: '#FF8B01',
			},
			{
				name: '已完结',
				id: 100,
				icon: 'checkmark-circle',
				color: '#4CAF50',
			}
			],
			list: [],
			priority: [
				{
					id: -1,
					name: '所有',
				},
				{
					id: 3,
					name: '紧急',
					color: '#EA2121'
				},
				{
					id: 2,
					name: '重要',
					color: '#FF8B01'
				},
				{
					id: 1,
					name: '普通',
					color: '#365CD2'
				}
			],
			userInfo: {
				pic: '', // 头像
				showname: '', // 姓名
			}, // 用户信息
			info: {
				page: 1, // 页码
				page_num: 20, // 每页数量
				status: -1, // 状态 -1 全部 0 进行中 1待审核 2已完成
				level: -1, // 优先级 -1 全部 0 紧急 1 重要 2 普通
			},
			status: -1,
			hasMore: 'loading', // 是否有更多数据
		};
	},
	onLoad() {
		if (!this.userinfo || !this.userinfo.id) {
			// 清空缓存
			this.toLogin();
			return;
		}
		this.getMyTaskInfo();
	},
	methods: {
		// 获取任务详情做判断
		taskDetail(taskId) {
			this.navto(`/plugin_oa/task_detail?task_id=${taskId}`);
		},
		getStatus(status) {
			this.info.status = status; // 状态 -1 全部 0 等待开始 1进行中 2已完成
			// 重置表单
			this.list = [];
			this.getMyTaskInfo();
		},
		getMyTaskInfo() {
			this.hasMore = 'loading';
			this.moxiPost(
				'/plugin/oa/user/task/my_task',
				this.info,
				(res) => {
					this.userInfo = this.getUserInfo();
					this.list.push(...res.data.data);
					if (this.list.length < this.info.page_num) {
						this.hasMore = 'nomore'; // 没有更多数据
					}
					console.log(this.list);
				}
			)
		},
		scrolltolower() {
			if (this.hasMore == 'loading') {
				this.info.page++; // 页码
				this.getMyTaskInfo(); // 获取任务列表
			}
		},
		// 判断剩余时间 单位 s
		shengyuTime(startTime, endTime, status) {
			let date = Math.floor(new Date().getTime() / 1000);
			if (endTime == -1) {
				return '不限';
			}
			if (status == 1 && date > endTime) {
				return '已超时';
			} else if (date < startTime) {
				return '未开始';
			} else {
				date = endTime - date;
				let day = Math.floor(date / (24 * 60 * 60));
				let hour = Math.floor((date % (24 * 60 * 60)) / (60 * 60));
				let minute = Math.floor((date % (60 * 60)) / 60);
				if (day < 0 || hour < 0 || minute < 0) {
					return '已超时';
				}
				if (day == 0) {
					return `${hour}小时${minute}分钟`;
				} else if (hour == 0) {
					return `${minute}分钟`;
				} else {
					return `${day}天${hour}小时${minute}分钟`;
				}
			}
		},
		// 根据秒s时间戳转换为日期格式2025/05/01 单位 s
		formatDate(data) {
			const date = new Date(data * 1000);
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			return `${year}/${month}/${day}`;
		},
		hexToRgb(hex) {
			hex = hex.replace(/^#/, '');
			if (hex.length === 3) {
				hex = hex.split('').map(c => c + c).join('');
			}
			const bigint = parseInt(hex, 16);
			const r = (bigint >> 16) & 255;
			const g = (bigint >> 8) & 255;
			const b = bigint & 255;
			return `${r},${g},${b}`;
		},
	}
}
</script>

<style lang="scss">
@mixin flex($gap: 8px, $ju: space-between, $al: center, $fd: row, $wrap: nowrap) {
	display: flex;
	justify-content: $ju;
	align-items: $al;
	gap: $gap;
	flex-wrap: $wrap;
	flex-direction: $fd;
}

.list {
	margin-top: 12px;
	@include flex(0px, space-between);
	padding: 12px 24px;
	background-color: #fff;
	border-radius: var(--app-radius);

	.item {
		@include flex(4px, center, center, column);

		.circle {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			overflow: hidden;
			@include flex(0, center, center)
		}

		.text {
			text-align: center;
			font-size: 14px;
		}
	}
}

.scrollY {
	margin-top: 12px;
	overflow: hidden;
	border-radius: 8px;
}

.classify {
	.title {
		margin-top: 12px;
		font-size: 12px;
		color: #000;
		font-weight: bold;
	}

	.item {
		@include flex(8px, normal, normal, column);
		padding: 16px;
		border: var(--app-radius);
		background-color: #fff;
		border-radius: var(--app-radius);
		margin-top: 12px;

		.person-info {
			@include flex;
			justify-content: normal;
			font-size: 14px;
			color: #000;

			.avatar {
				width: 48px;
				height: 48px;
				border-radius: 8px;
				overflow: hidden;
				flex-shrink: 0;
			}

			.info {
				flex: 1;

				.name {
					@include flex(0, space-between);
					flex: 1;
					font-weight: bold;
					margin-bottom: 4px;

					.more {
						@include flex;
						font-size: 10px;

						.tag {
							padding: 2px 8px;
							border-radius: var(--app-radius);
						}
					}
				}

				.office {
					font-size: 12px;
					color: #999;
				}
			}
		}

		.showTime {
			@include flex(4px, normal, normal, column);
			font-size: 12px;
			color: #000;
			white-space: nowrap;
		}

		.jindu {
			@include flex(4px, space-between);
			padding-bottom: 12px;
			border-bottom: 0.5px solid rgba($color: #999, $alpha: 0.3);
		}

		.showMore {
			margin-top: 8px;
			@include flex(2px, space-between);
			font-size: 12px;
			text-align: center;
			color: #000;

			.show-item {
				flex: 1;
				@include flex(6px, space-between, center, column);
				white-space: nowrap;

				.circle {
					border-radius: 50%;
					border: 1px solid var(--app-color);
					padding: 3px;
				}

				.text {
					@include flex(0, center, center);
				}
			}
		}
	}
}
</style>